<template>
	<uni-popup ref="giftPopup" type="bottom">
		<view class="bg-white popup-view">
			<view class="flex justify-between align-center popup-top">
				<text class="text-main font-md ml-3">礼物</text>
				<view class="flex align-center justify-center popup-close" @click="close">
					<text class="iconfont text-dark">&#xe607;</text>
				</view>
			</view>
			<swiper :indicator-dots="true" :duration="500" class="border-bottom border-top popup-center">
				<swiper-item>
					<view class="flex flex-wrap">
						<view class="gift flex flex-column justify-center align-center" v-for="(item, index) in gifts" :key="index" :class="giftActiveId  ===  item.id ? 'border border-main' : ''" @click="giftActiveId = item.id">
							<image :src="item.image" mode="aspectFill" class="gift-icon"></image>
							<view class="flex mt-1">
								<text class="text-warning font mr-1">{{item.name}}</text>
								<text class="text-secondary font">{{item.coin}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="popup-bottom  flex align-center justify-end">
				<view class="flex align-center justify-center py-2 px-2 mr-3 rounded bg-warning" @click="openCoin">
					<text class="font">充值</text>
				</view>
				<view class="flex align-center justify-center py-2 px-2 mr-3 rounded bg-main" @click="sendGift">
					<text class="font">发送</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import demoGifts from '@/demo/gifts.js';
	export default {
		data() {
			return {
				// gifts:[],
				giftActiveId: 0
			}
		},
		props: {
			gifts: {
				type: Array,
				default: []
			}
		},
		created() {
			// this.gifts = demoGifts
		},
		methods: {
			close() {
				this.$refs.giftPopup.close()
			},
			open() {
				this.$refs.giftPopup.open()
			},
			sendGift() {
				if (this.giftActiveId === 0) {
					return uni.showToast({
						title: '请选择要发送的礼物',
						icon: 'none'
					})
				}
				let index = this.gifts.findIndex(item => item.id === this.giftActiveId)
				if (index === -1)  {
					return
				}
				let gift = this.gifts[index]
				this.$emit('sendGift', gift)
				this.giftActiveId =  0
				this.close()
			},
			openCoin() {
				this.$emit('openCoin',  {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-view {
		width: 750rpx;
		height: 550rpx;
		
		.popup-top {
			height: 100rpx;
			
			.popup-close {
				width: 100rpx;
				height: 100rpx;
			}
		}
		
		.popup-center  {
			height: 350rpx;
			
			.gift {
				width: 187.5rpx;
				height: 175rpx;
				
				.gift-icon {
					width: 100rpx; 
					height: 100rpx;
				}
			}
			
		}
		
		.popup-bottom {
			height: 100rpx;
		}
	}
</style>
